<template>
    <view>
        <uni-forms-item
            :name="name"
            :label="label"
        >
            <uni-file-picker
            	v-model="imageValue1"
            	file-mediatype="image" 
            	file-extname="png,jpg"
            	limit="1"
            	return-type="object"
            	mode="grid" 
            	@select="select" 
            	@delete="delete1" 
            />
        </uni-forms-item>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload } from '@dcloudio/uni-app'
    import { markRaw, onBeforeUnmount, reactive, ref, watchEffect } from 'vue'
    import type { Ref, Raw } from 'vue'
    import uploadApi from '@/apis/uploadApi'
    
    const imageValue1: Ref<any> = ref({
    // name: '',
    // extname: '',
    // url: '',
    // path: '',
    })
    
    const props = withDefaults(defineProps<{
        name?: string,
        label?: string,
        modelValue?: string,
    }>(), {
        name: '',
        label: '',
        modelValue: '',
    })
    const emits = defineEmits<{
        (e:'update:modelValue', data: any): void
    }>()
    
    watchEffect(() => {
        if (props.modelValue) {
            imageValue1.value = {
                // name: '',
                // extname: '',
                path: props.modelValue,
                url: 'https://' + props.modelValue,
            }
        }
    })
    const select = (e) => {
        console.log('选择文件：',e)
        console.log(imageValue1.value)
        // console.log(e.tempFiles[0].file)
        uploadApi(e.tempFilePaths[0]).then((res: any) => {
            if (res.code == 200) {
                emits('update:modelValue', res.data.path)
            } else {
                uni.showToast({
                     title: res.msg,
                     icon: 'error',
                     mask: true,
                });
                imageValue1.value = {}
                emits('update:modelValue', '')
            }
        }).catch(err => {
            imageValue1.value = {}
            emits('update:modelValue', '')
        })
    }
    const delete1 = (e) => {
        console.log('删除：',e)
        console.log(imageValue1.value)
        imageValue1.value = {}
        emits('update:modelValue', '')
    }
    
</script>

<style>

</style>